<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>

      <div class="container">
        <div class="box1">
          <div class="am">
            <div class="n">{{ $t('new.doc20') }}</div>
            <p><span>{{ common.decal2(info.orderAmount) }}</span>USDT</p>
          </div>
          <ul class="db">
            <li>
              <div class="s">{{ common.decal2(info.todayIncome) || 0 }}</div>
              <div class="n">{{ $t('new.doc21') }}</div>
            </li>
            <li>
              <div class="s">{{ common.decal2(info.orderCount) || 0 }}</div>
              <div class="n">{{ $t('page3.doc40') }}</div>
            </li>
            <li>
              <div class="s">{{ common.decal2(info.estimateTotalIncome) || 0 }}</div>
              <div class="n">{{ $t('new.doc15') }}</div>
            </li>
          </ul>
        </div>
        <div class="listBox">
          <div class="flex items-center">
            <img style="width: 19px;" src="@/assets/images/invest/tzor.png" alt="">
            <div class="cname">{{ $t('page3.doc14') }}</div>
          </div>
          <img class="line3" src="@/assets/images/invest/line3.png" alt="">
          <ul class="tab flex">
            <li v-for="(item,k) in tabData" :key="k" :class="{on:cid == item.cid}" @click="onTab(item)">
              {{ item.name }}
            </li>
          </ul>


          <div class="empty db rel" style="z-index: 3;" v-show="emptyShow">
            <div class="flexs">
              <van-empty
                class="custom-image"
                :image="require('../../assets/images/none.png')"
                :description="$t('load.doc1') "
              />
            </div>
          </div>
          <van-pull-refresh
            v-model="refreshing"
            :success-text="$t('load.refreshed')"
            @refresh="onRefresh(0)"
            head-height="50"
            v-if="!emptyShow"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <div class="list">
                <div class="item" v-for="(item,index) in datalist" :key="index">
                  <div class="head">
                    <img :src="item.productImg||require('@/assets/images/invest/item-head-bg.png') " alt="">
                    <div class="head-content">
                      <div class="title">{{ item.productName }}</div>
                      <div class="buy-btn" @click="path_url(`/invest/detail`,item)">{{ $t('new.doc24') }}</div>
                    </div>
                  </div>
                  <div class="info-list">
                    <div class="info">
                      <div class="name">{{ $t('page4.doc123') }}</div>
                      <div class="value active">{{ 100 + common.accMul(item.rate, 100) * item.days }}%</div>
                    </div>
                    <div class="info">
                      <div class="name">{{ $t('page3.doc43') }}</div>
                      <div class="value">{{ common.decal2(item.orderAmount) }} USDT</div>
                    </div>
                    <div class="info">
                      <div class="name">{{ $t('new.doc19') }}</div>
                      <div class="value">{{ $t('page3.doc36', {i1: item.days}) }}</div>
                    </div>
                    <div class="info" v-if="cid==10">
                      <div class="name">{{ $t('page3.doc23') }}</div>
                      <div class="value">{{ item.endDate }}</div>
                    </div>
                    <div class="info" v-if="item.hasRedeem">
                      <div class="name">{{ $t('new.doc55') }}</div>
                      <div class="value tips">{{ $t('new.doc56') }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>

      </div>
    </template>
  </page-scroll>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t('page3.doc9'),
      cid: 1,
      tabData: [
        {name: this.$t('page3.doc16'), cid: 1},
        {name: this.$t('new.doc23'), cid: 10},
      ],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      info: []
    };
  },

  mounted() {
    this.$post(this.URL.financial.view, {}).then((res) => {
      if (res.code == 0) {
        this.info = res.data
      } else {
        this.$toast(res.message);
      }
    });
  },


  methods: {
    onTab(item) {
      this.cid = item.cid
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0
      this.totalPage = ""
      this.finished = false
      this.loading = true
      this.datalist = []
      this.emptyShow = false
      this.onLoad()

    },


    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = []
          this.refreshing = false;
        }
        this.getlist();
      }, 100)
    },
    onRefresh() {
      this.finished = false
      this.loading = true

      this.pageSize = 0
      this.totalPage = ""

      this.onLoad();
    },


    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true

        return;
      }

      this.$post(this.URL.financial.record, {
        status: this.cid,
        page: this.pageSize,
        pageSize: 10
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false
            this.emptyShow = true
            return
          }

          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.emptyShow = this.datalist.length == 0;
          this.loading = false;

        } else {
          this.$toast(res.message);
        }
      });
    },


    path_url(url, item) {
      this.$router.push({path: url, query: {orderId: item.orderId}});
    },
  },
};
</script>


<style lang="less" scoped>
.line3 {
  width: 100%;
  height: 3px;
  margin-top: 5px;
  margin-bottom: 14px;
}

.page {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
}

/deep/ .head {
  background: linear-gradient(180deg, rgba(2,5,6,1) 0%, rgba(18,49,44,1) 100%);
}

.container {
  padding-top: 14px;
}

.cname {
  font-size: .36rem;
  color: #FFFFFF;
  font-weight: 600;
  line-height: .5rem;
  margin-left: 8px;
}

.box1 {
  background: linear-gradient(135deg, rgba(20,71,58,1) 0%, rgba(17,40,42,1) 100%);
  border-radius: 20px;
  background-size: 100% 100%;
  text-align: center;
  padding: .32rem;
  margin-bottom: .45rem;

  .am {
    margin-bottom: .3rem;
    color: #8BFFC2;

    .n {
      font-size: .28rem;
      line-height: .4rem;
      margin-bottom: .08rem;
      color: #fff;

    }

    p {
      line-height: 1.1;

      span {
        font-size: .56rem;
        margin-right: .1rem;
      }

      font-size: .48rem;
    }
  }

  ul {
    li {
      padding: 0 .24rem;

      .s {
        color: #8BFFC2;
        line-height: 150%;
        font-weight: 600;
      }

      .n {
        color: #fff;
        line-height: .32rem;
        font-size: .24rem;
      }
    }
  }
}

.listBox {
  .tab {
    margin-bottom: .24rem;
    background: #0e4e35;
    padding: 6px;
    border-radius: 8px;

    li {
      flex: 1;
      height: .66rem;
      line-height: 1.2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 .32rem;
      //background: #231417;
      font-size: 16px;
      color: #fff;
      border-radius: 8px;
      //margin-right: .24rem;

      &.on {
        background: linear-gradient(90.25deg, #43ea81 0.21%, #10995d 99.79%);
        color: #fff;
      }
    }
  }

  .list {
    .item {
      border-radius: .24rem;
      background: #103833;
      overflow: hidden;

      &:nth-of-type(n+2) {
        margin-top: .24rem;
      }

      .head {
        position: relative;

        img {
          width: 100%;
          height: 1.36rem;
        }

        .head-content {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
          padding: 0 .32rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            color: #FFF;
            font-size: .28rem;
          }

          .buy-btn {
            border-radius: 1.8rem;
            background: #1aa964;
            color: #fff;
            font-weight: 600;
            font-size: .24rem;
            padding: .14rem .24rem;
          }
        }
      }

      .info-list {
        padding: .32rem;

        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:nth-of-type(n+2) {
            margin-top: .24rem;
          }

          .name {
            color: #BDBDBD;
            font-size: .26rem;
          }

          .value {
            color: #FFF;
            font-size: .26rem;

            &.tips {
              border-radius: 1rem;
              background: #0BCA57;
              padding: .12rem .24rem;
              color: #FFF;
              font-size: .24rem;
            }
          }

          .active {
            color: #ffff00;
          }
        }
      }
    }
  }
}
</style>
